<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3" xmlns:head="http://www.w3.org/1999/html">
<head th:include="public/public_css::public_css ('运费统计报表')" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.dataTables.js" type="text/javascript"></script>
<body id="colTb" style="background-color: #f2f2f2;">
<div class="layui-fluid larry-wrapper">
    <div class="layui-card">
        <div class="layui-row layui-col-space30">
            <div class="layui-col-xs24">
                <form class="layui-form layui-card-header  layui-card-header-auto" id="searchForm">
                    <div class="layui-inline">
                        <label class="layui-form-label">状态查询</label>
                        <select name="state" id="state" lay-filter="aihao">
                            <option value="0">全部</option>
                            <option value="1">已发货订单</option>
                            <option value="2">待发货订单</option>
                        </select>
                    </div>
                    <div class="layui-inline inline-search-btn">
                        <a class="layui-btn layui-btn-normal" data-type="reload" id="search_button"> 搜索 </a>
                    </div>
                    <div class="layui-inline inline-reset-btn">
                        <button type="reset" class="layui-btn layui-btn-primary" style="background-color: #40AFFE">重置</button>
                    </div>
                </form>
                <div class="group-button" id="toolbar">
                    <a class="layui-btn layui-btn-sm layui-btn-normal out-put">
                        <i class="layui-icon">&#x1005;</i> 导出
                    </a>
                </div>
                <!--列表-->
                <section class="panel panel-padding layui-card-body" >
                    <div class="pro">
                        <table id="dataTable" class="table text-nowrap" width="100%">

                        </table>

                    </div>
                </section>
            </div>
        </div>
    </div>
</div>
</body>
<div th:include="public/public_js::public_js"></div>
<script>
    //	回车查询
    document.onkeydown = function(event) {
        e = event ? event : (window.event ? window.event : null);
        if (e.keyCode == 13) {
            //执行的方法
            $('#search_button').click();
        }
    };
    layui.use(['list', 'layer', 'zzpUtils', 'jquery', 'laydate'], function () {
        var myColumns = [];
        var zzpUtils = layui.zzpUtils,
            $ = layui.jquery,
            laydate = layui.laydate;
        window.operateEvent ={
            "click .layui-btn-primary":function (e, value, row, index) {
                alert(row.mc);
            }
        }
        myColumns = getColumns();
        var $table = zzpUtils.table({
            elem: '#dataTable',
            isApi: true,
            pagination: true,
            autoWidth: false,
            scrollX: true,
            data: {state: $('#state').val()},
            url: '/ProvincialDynamicReportsController/Thenumberofshipmentsineach', // 获取数据的地址
            columns: myColumns,
            queryParams: function () {//查询条件
                return  zzpUtils.getFormJson($("#searchForm"));
            },
            detailFormatter: function (index, row) {
                return "这里就没有确定过11";
            }

        });
        $(".inline-search-btn").on('click',function () {
            zzpUtils.refreshTable("#dataTable");
        })
        function getColumns() {
            var ajaxdata = [];
            // 加载动态表头
            $.ajax({

                url: '/zxsswms/WmsReportHeaderController/supportnumberhead',
                type: 'POST',
                dataType: "json",
                contentType: "application/json",
                data: JSON.stringify({"page":1,"rows":10}),
                async: false,
                success: function (returnValue) {
                    ajaxdata.push({"field": '',
                        "checkbox": true,
                    });
                    // 异步获取要动态生成的列
                    var arr = returnValue.rows;
                    $.each(arr, function (i, item) {
                        ajaxdata.push({
                            "field": item.prop,
                            "title": item.label,
                            "hide": true,
                            "align": 'center',
                            "valign": 'middle'
                        });
                    });
                    console.log(ajaxdata);
                }
            });
            return ajaxdata;
        }

        /*顶部按钮导出 */
        $(".out-put").on('click', function () {
            var arr=[];
            var $rows = $table.bootstrapTable('getSelections');
            if ($rows.length >0) {
                arr = $.map($rows, function (row) {
                    return row.Province;
                })
            }
            var xhr = new XMLHttpRequest();
            xhr.open("POST", "http://localhost:8080/zxsswms/ProvincialDynamicReportsController/PmentSineachProvince", true);
            xhr.responseType = "blob";
            xhr.setRequestHeader('Accept', 'application/json');
            xhr.setRequestHeader('Content-Type', 'application/json');
            xhr.setRequestHeader('Charset', 'utf-8');
            xhr.onload = function() {
                if (this.status == 200) {
                    var name = xhr.getResponseHeader("Content-disposition");
                    name=decodeURI(name);
                    var filename = name.substring(20,name.length);
                    var blob = new Blob([xhr.response], {type: 'text/xls'});
                    var csvUrl = URL.createObjectURL(blob);
                    var link = document.createElement('a');
                    link.href = csvUrl;
                    link.download = filename;
                    link.click();
                }
            };
            /*
             * 以下是将ids和对象拼接在一起
             * */
            var obj = [];
            for(var i=0;i<arr.length;i++) {
                var person = {};
                person[i] = arr[i];
                obj.push(person);
            }
            var str=zzpUtils.getFormJson($("#searchForm"));
            var object2 = Object.assign({ids: arr}, str);
            /*将条件查询和ids传到后台*/
            xhr.send(JSON.stringify(
                object2
            ));
        })//导出结束
    })



</script>
</html>